import React from "react";
import { Picker, Modal, ActionSheet } from "antd-mobile";
import { province } from "../../assets/data/province";

class Index extends React.Component {
  constructor() {
    super();
    this.state = {
      provinceText: "",
      checked: true,
      genderText: "",
    };
    this.num = 0;
  }

  goPage(url) {
    this.props.history.push(url);
  }
  delUser() {
    Modal.alert("确认要删除吗？", "", [
      { text: "取消", onPress: () => console.log("取消") },
      {
        text: "确认",
        onPress: () => {
          console.log("确认删除");
        },
      },
    ]);
  }
  selectGender() {
    const genders = ["男", "女", "取消"];
    ActionSheet.showActionSheetWithOptions(
      {
        options: genders,
        cancelButtonIndex: genders.length - 1,
        message: "请选择性别",
        maskClosable: true,
      },
      (index) => {
        // console.log(index)
        if (index < genders.length - 1) {
          this.setState({ genderText: genders[index] });
        }
      }
    );
  }
  refresh() {
    console.log("调用数据");
  }
  render() {
    return (
      <div>
        <div>
          <Picker
            data={province}
            title="请选择所在地区"
            onOk={(v) => {
              console.log(v);
              this.setState({ provinceText: v.join(" ") });
            }}
            onDismiss={(e) => console.log("取消")}
            value={this.state.provinceText.split(" ")}
          >
            <input
              type="text"
              placeholder="请选择所在地区"
              value={this.state.provinceText}
              readOnly
            />
          </Picker>
        </div>
      </div>
    );
  }
}

export default Index;
